<template>
	<div>
		<zh-card title="">
			<zh-form :model="pageData.queryParams" ref="queryFormRef">
				<!--        <zh-form-input prop="statementId" label="逻辑表映射语句id" type="text" :span="8" dataType="common"
                       v-model="pageData.queryParams.statementId"></zh-form-input>-->
				<zh-form-input
					prop="funcCode"
					label="功能编号"
					type="text"
					:span="8"
					dataType="common"
					v-model="pageData.queryParams.funcCode"
				></zh-form-input>
				<!--        <zh-form-input prop="interfaceId" label="动态接口id" type="text" :span="8" dataType="common"
                       v-model="pageData.queryParams.interfaceId"></zh-form-input>
        <zh-form-input prop="tableId" label="逻辑表格id" type="text" :span="8" dataType="common"
                       v-model="pageData.queryParams.tableId"></zh-form-input>
        <zh-form-input prop="srcTableId" label="源表格表id" type="text" :span="8" dataType="common"
                       v-model="pageData.queryParams.srcTableId"></zh-form-input>-->
				<zh-form-input
					prop="srcTableName"
					label="源表格名称"
					type="text"
					:span="8"
					dataType="common"
					v-model="pageData.queryParams.srcTableName"
				></zh-form-input>
				<zh-form-select
					prop="isVerticalTable"
					label="是否纵表语句"
					type="text"
					:options="[
						{ dictKey: '0', dictValue: '否' },
						{ dictKey: '1', dictValue: '是' },
					]"
					placeholder="请选择"
					v-model="pageData.queryParams.isVerticalTable"
				></zh-form-select>
				<zh-form-input prop="groupId" label="纵表分组id" type="text" v-model="pageData.queryParams.groupId"></zh-form-input>
				<zh-form-input
					prop="statement"
					label="语句"
					type="textarea"
					:rows="4"
					:span="24"
					dataType="common"
					v-model="pageData.queryParams.statement"
				></zh-form-input>
				<zh-form-query @queryClick="queryLogicStatement" :formRef="queryFormRef" :show-advanced="false">
					<el-button @click="showCreateInterfaceDialog">创建接口语句</el-button>
<!--					<el-button @click="showAddDialog">添加</el-button>-->
				</zh-form-query>
			</zh-form>
		</zh-card>
		<zh-table
			title="逻辑表语句列表"
			ref="logicStatementTable"
			size="mini"
			:funcCode="'logicStatement0001'"
			:columns="pageData.tableColumns"
			highlight-current-row
		>
      <template #header_button>
        <el-button :icon="Delete" type="danger" @click="delCheckedLogicStatement">删除选中</el-button>
      </template>
			<template #op="scope">
				<el-tooltip content="编辑" placement="top">
					<el-button :icon="Edit" link @click="showEditDialog(scope)"></el-button>
				</el-tooltip>
				<el-tooltip content="删除" placement="top">
					<el-button :icon="Delete" type="danger" link @click="delLogicStatement(scope.row)"></el-button>
				</el-tooltip>
				<el-tooltip content="详情" placement="top">
					<el-button :icon="Document" link @click="showDetail(scope)"></el-button>
				</el-tooltip>
			</template>
		</zh-table>
		<el-dialog title="添加逻辑表语句" v-model="pageData.addLogicStatementDialogVisible">
			<zh-form :rules="pageData.formRules">
				<zh-form-input
					prop="statementId"
					label="逻辑表映射语句id"
					type="text"
					:span="8"
					dataType="common"
					v-model="pageData.formData.statementId"
				></zh-form-input>
				<zh-form-input prop="funcCode" label="功能编号" type="text" :span="8" dataType="common" v-model="pageData.formData.funcCode"></zh-form-input>
				<zh-form-input
					prop="interfaceId"
					label="动态接口id"
					type="text"
					:span="8"
					dataType="common"
					v-model="pageData.formData.interfaceId"
				></zh-form-input>
				<zh-form-input
					prop="tableId"
					label="逻辑表格id"
					type="text"
					:span="8"
					dataType="common"
					v-model="pageData.formData.tableId"
					v-show="false"
				></zh-form-input>
				<zh-form-input
					prop="srcTableId"
					label="源表格表id"
					type="text"
					:span="8"
					dataType="common"
					v-model="pageData.formData.srcTableId"
				></zh-form-input>
				<zh-form-input
					prop="srcTableName"
					label="源表格名称"
					type="text"
					:span="8"
					dataType="common"
					v-model="pageData.formData.srcTableName"
				></zh-form-input>
				<zh-form-select
					prop="isVerticalTable"
					label="是否纵表语句"
					type="text"
					:options="[
						{ dictKey: '0', dictValue: '否' },
						{ dictKey: '1', dictValue: '是' },
					]"
					placeholder="请选择"
					v-model="pageData.formData.isVerticalTable"
				></zh-form-select>
				<zh-form-input prop="groupId" label="纵表分组id" type="text" v-model="pageData.formData.groupId"></zh-form-input>
				<zh-form-input
					prop="statement"
					label="语句"
					type="textarea"
					:rows="4"
					:span="24"
					dataType="common"
					v-model="pageData.formData.statement"
				></zh-form-input>
			</zh-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="pageData.addLogicStatementDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="addLogicStatement"> 保存 </el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog title="修改逻辑表语句" v-model="pageData.editLogicStatementDialogVisible" width="60%" @close="closeDialog" destroy-on-close>
			<zh-card title="查询条件" :bordered="true">
				<zh-form :model="pageData.formData" ref="queryDialogRef">
					<zh-form-input prop="funcCode" label="功能编号" placeholder="请输入功能编号" v-model="pageData.queryFuncCode" />
					<zh-form-query @queryClick="getDialogInfo" :formRef="queryDialogRef" :showAdvanced="false"></zh-form-query>
				</zh-form>
			</zh-card>
      <zh-table title="" size="mini" height="300"
                :columns="pageData.dialogColumns" :data="pageData.tableData" highlight-current-row ref="dialogQueryTable" @click="handledData"></zh-table>
			<zh-card title="当前选择条目" :bordered="true">
				<zh-form :rules="pageData.formRules" :labelWidth="130">
					<zh-form-input prop="statementId" label="逻辑表映射语句id" v-model="pageData.editFormData.statementId"></zh-form-input>
					<zh-form-input prop="funcCode" label="功能编号" v-model="pageData.editFormData.funcCode"></zh-form-input>
					<zh-form-input prop="interfaceId" label="动态接口id" v-model="pageData.editFormData.interfaceId"></zh-form-input>
					<zh-form-input prop="tableId" label="逻辑表格id" v-model="pageData.editFormData.tableId" v-show="false"></zh-form-input>
					<zh-form-input prop="srcTableId" label="源表格表id" v-model="pageData.editFormData.srcTableId" v-show="false"></zh-form-input>
					<zh-form-input prop="srcTableName" label="源表格名称" v-model="pageData.editFormData.srcTableName"></zh-form-input>
					<zh-form-select
						prop="isVerticalTable"
						label="是否纵表语句"
						type="text"
						:options="[
							{ dictKey: '0', dictValue: '否' },
							{ dictKey: '1', dictValue: '是' },
						]"
						placeholder="请选择"
						v-model="pageData.editFormData.isVerticalTable"
					></zh-form-select>
					<zh-form-input prop="groupId" label="纵表分组id" type="text" v-model="pageData.editFormData.groupId"></zh-form-input>
					<zh-form-input prop="statement" label="语句" type="textarea" :rows="4" :span="24" v-model="pageData.editFormData.statement"></zh-form-input>
				</zh-form>
			</zh-card>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="pageData.editLogicStatementDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="editLogicStatement"> 保存 </el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog title="创建接口语句" v-model="pageData.createInterfaceDialog" :width="1200">
			<zh-card title="逻辑表查询条件">
				<zh-form ref="interfaceQueryFormRef" :model="pageData.interfaceQueryParams">
					<zh-form-input prop="mapTableName" label="逻辑表名称" v-model="pageData.interfaceQueryParams.mapTableName"></zh-form-input>
					<zh-form-input prop="srcTableName" label="源表名称" v-model="pageData.interfaceQueryParams.srcTableName"></zh-form-input>
					<zh-form-query @queryClick="queryInterfaceTable" :formRef="interfaceQueryFormRef" :show-advanced="false"> </zh-form-query>
				</zh-form>
			</zh-card>
			<zh-table
				title="逻辑表列表"
				ref="logicTableRef"
				size="mini"
				:funcCode="'logicTableFieldMap0007'"
				:columns="pageData.logicTableColumns"
				:checkbox-config="{ trigger: 'row' }"
				:height="300"
				highlight-current-row
			>
			</zh-table>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="pageData.createInterfaceDialog = false">取消</el-button>
					<el-button type="primary" @click="createInterfaceStatement"> 保存 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup name="logicStatement">
import { Delete, Edit, Document } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';
// ------------------接收传入参数(组件)-------------------

// ------------------钩子函数----------------------------
// 初始化
onMounted(() => {
	init();
});

// ------------------定义子组件--------------------------
const dialogQueryTable = ref();
const logicStatementTable = ref();
const queryFormRef = ref();
const queryDialogRef = ref();
const interfaceQueryFormRef = ref();
const logicTableRef = ref();
// ------------------变量区------------------------------
const pageData = reactive({
	queryFuncCode: '',
	dialogColumns: [
		{ type: 'seq', width: 60, fixed: 'left', align: 'center', title: '序号' },
		// { field: 'interfaceId', title: '接口编号', visible: true, align: 'center', width: 200 },
		{ field: 'funcType', title: '接口类型', visible: true, align: 'center', width: 200 },
		{ field: 'funcCode', title: '功能编号', visible: true, align: 'center', width: 200 },
	],
	queryData: {},
	tableData: [] as any,
	createInterfaceDialog: false,
	logicTableColumns: [
		{ type: 'checkbox', width: 50, fixed: 'left' },
		{ type: 'seq', width: 60, fixed: 'left', align: 'center', title: '序号' },
		// {field: 'mapTableId', title: '逻辑表格id', visible: true, align: 'center', width: 100},
		{ field: 'mapTableName', title: '逻辑表格名称', visible: true, align: 'center', width: 100 },
		{ field: 'srcTableId', title: '源表格表id', visible: true, align: 'center', width: 100 },
		{ field: 'srcTableName', title: '源表格名称', visible: true, align: 'center', width: 100 },
		// {field: 'op', title: '操作', visible: true, align: 'center', width: 100, fixed: 'right', slots: {default: 'op'}},
	],
	interfaceQueryParams: { mapTableName: '', srcTableName: '' },
	addLogicStatementDialogVisible: false,
	editLogicStatementDialogVisible: false,
	detailDialog: false,
	tableColumns: [
    { type: 'checkbox', width: 50, fixed: 'left' },
		{ type: 'seq', width: 60, fixed: 'left', align: 'center', title: '序号' },
		// {field: 'statementId', title: '逻辑表映射语句id', visible: true, align: 'center', width: 100},
		{ field: 'funcCode', title: '功能编号', visible: true, align: 'center', width: 100 },
		// {field: 'interfaceId', title: '动态接口id', visible: true, align: 'center', width: 100},
		// {field: 'tableId', title: '逻辑表格id', visible: true, align: 'center', width: 100},
		// {field: 'srcTableId', title: '源表格表id', visible: true, align: 'center', width: 100},
		{ field: 'srcTableName', title: '源表格名称', visible: true, align: 'center', width: 100 },
		{ field: 'statement', title: '语句', visible: true, align: 'center', minWidth: 200 },
		{ field: 'isVerticalTable', title: '是否纵表语句', visible: false, align: 'center', width: 100 },
		{ field: 'isVerticalTableName', title: '是否纵表语句', visible: true, align: 'center', width: 100 },
		{ field: 'groupId', title: '纵表分组id', visible: true, align: 'center', width: 100 },
		{ field: 'op', title: '操作', visible: true, align: 'center', width: 100, fixed: 'right', slots: { default: 'op' } },
	],
	queryParams: {
		statementId: '',
		funcCode: '',
		interfaceId: '',
		tableId: '',
		srcTableId: '',
		srcTableName: '',
		statement: '',
		isVerticalTable: '',
		groupId: '',
	},
	formData: {
		statementId: '',
		funcCode: '',
		interfaceId: '',
		tableId: '',
		srcTableId: '',
		srcTableName: '',
		statement: '',
		isVerticalTable: '',
		groupId: '',
	} as any,
	editFormData: {
		statementId: '',
		funcCode: '',
		interfaceId: '',
		tableId: '',
		srcTableId: '',
		srcTableName: '',
		statement: '',
		isVerticalTable: '',
		groupId: '',
	},
	formRules: {},
	dictFields: '',
	dictData: [],
});
// ------------------方法区------------------------------
// 获取逻辑接口数据
const getDialogInfo = () => {
	const params = {
		funcCode: pageData.queryFuncCode,
	};
  $api.common.send.post('logicInterface0001', params).then((res: any) => {
		pageData.tableData = res.result.list;
	});
};
// “修改逻辑表语句”弹框关闭的回调
const closeDialog = () => {
  pageData.queryFuncCode = '';
  pageData.tableData = [];
}
// “修改逻辑表语句”弹框，表格行点击的回调
const handledData = () => {
  const rowData = dialogQueryTable.value.getCurrentRecord();
  pageData.editFormData.funcCode = rowData.funcCode;
  pageData.editFormData.interfaceId = rowData.interfaceId;
}
const showDetail = (scope: any) => {
	console.log('scope = ', scope);
};
const init = () => {
	getDict();
	queryLogicStatement();
};
// 查询数据字典信息
const getDict = () => {
	let params = {
		dictFields: pageData.dictFields,
	};
	$api.common.getBatchDict.post(params).then((res: any) => {
		pageData.dictData = res.result;
	});
};
const queryLogicStatement = () => {
	logicStatementTable.value.query(pageData.queryParams);
};
// const showAddDialog = () => {
// 	pageData.addLogicStatementDialogVisible = true;
// 	pageData.formData = {
// 		statementId: '',
// 		funcCode: '',
// 		interfaceId: '',
// 		tableId: '',
// 		srcTableId: '',
// 		srcTableName: '',
// 		statement: '',
// 	};
// };
const showEditDialog = (scope: any) => {
	pageData.editLogicStatementDialogVisible = true;
	pageData.editFormData = { ...scope.row };
};
const addLogicStatement = () => {
	$api.common.send.post('logicStatement0004', pageData.formData).then((res) => {
		if (res.code == 0) {
			ElMessageBox.alert('添加逻辑表语句成功');
			pageData.addLogicStatementDialogVisible = false;
			queryLogicStatement();
		}
	});
};
const editLogicStatement = () => {
	$api.common.send.post('logicStatement0005', pageData.editFormData).then((res) => {
		if (res.code == 0) {
			ElMessageBox.alert('修改逻辑表语句成功');
			pageData.editLogicStatementDialogVisible = false;
			queryLogicStatement();
		}
	});
};
const delLogicStatement = ({ statementId }) => {
	ElMessageBox.confirm('确定删除该逻辑表语句?').then(() => {
		$api.common.send.post('logicStatement0006', { statementId: statementId }).then((res) => {
			if (res.code == 0) {
				ElMessageBox.alert('删除逻辑表语句成功');
				queryLogicStatement();
			}
		});
	});
};

const delCheckedLogicStatement = () => {
  ElMessageBox.confirm('确定删除选中的逻辑表语句?').then(() => {
    let checkboxRecords = logicStatementTable.value.getCheckboxRecords();
    let statementIds = checkboxRecords.map(item => item.statementId);
    console.log('statementIds', statementIds);
    $api.common.send.post('logicStatement0008', {statementIds: statementIds}).then(res => {
      if (res.code == 0) {
        ElMessageBox.alert('删除选中逻辑表语句成功');
        queryLogicStatement();
      }
    })
  })
}

const showCreateInterfaceDialog = () => {
	pageData.createInterfaceDialog = true;
};

const queryInterfaceTable = () => {
	logicTableRef.value.query({ ...pageData.interfaceQueryParams });
};

const createInterfaceStatement = () => {
	let checkedRecord = logicTableRef.value.getCheckboxRecords();
	console.log('checkedRecord', checkedRecord);
	ElMessageBox.confirm('确定创建逻辑表语句?').then(() => {
		$api.common.send.post('logicStatement0007', { tableId: checkedRecord[0].mapTableId, ...checkedRecord[0] }).then((res) => {
			if (res.code == 0) {
				ElMessageBox.alert('创建逻辑表语句成功');
				pageData.createInterfaceDialog = false;
				queryLogicStatement();
			}
		});
	});
};
</script>
<style lang="scss" scoped></style>
